<template>
  <div class="flow-content">
    <iframe ref="myFlow" class="flow-iframe" :src="url"></iframe>
    <div v-if="loadIng" class="flow-loading"><i class="el-icon-loading"></i></div>
    <div
      v-if="readOnly && zoom > 0"
      class="zoom-box"
      :class="{ 'zoom-ing': zoomIng }"
    >
      <div class="zoom-svg">
        <svg
          t="1600613502044"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="1161"
          width="18"
          height="18"
        >
          <path
            d="M598.646154 401.723077H279.630769c-15.753846 0-27.569231 11.815385-27.569231 31.507692 0 15.753846 11.815385 27.569231 31.507693 27.569231h319.015384c15.753846 0 27.569231-11.815385 27.569231-31.507692 0-15.753846-15.753846-27.569231-31.507692-27.569231z"
            fill="#666666"
            p-id="1162"
          ></path>
          <path
            d="M921.6 850.707692l-204.8-196.923077c47.261538-59.076923 78.769231-137.846154 78.769231-220.553846 0-196.923077-157.538462-354.461538-354.461539-354.461538s-354.461538 157.538462-354.461538 354.461538 157.538462 354.461538 354.461538 354.461539c90.584615 0 173.292308-35.446154 236.307693-90.584616l204.8 196.923077c3.938462 3.938462 11.815385 7.876923 19.692307 7.876923s15.753846-3.938462 19.692308-7.876923c11.815385-15.753846 11.815385-35.446154 0-43.323077z m-484.430769-126.030769c-161.476923 0-295.384615-133.907692-295.384616-295.384615S275.692308 133.907692 437.169231 133.907692s295.384615 133.907692 295.384615 295.384616-129.969231 295.384615-295.384615 295.384615z"
            fill="#666666"
            p-id="1163"
          ></path>
        </svg>
        <svg
          t="1600613514136"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="1403"
          width="18"
          height="18"
        >
          <path
            d="M929.476923 854.646154l-212.676923-200.861539c47.261538-59.076923 78.769231-137.846154 78.769231-220.553846 0-196.923077-157.538462-354.461538-354.461539-354.461538s-354.461538 157.538462-354.461538 354.461538 157.538462 354.461538 354.461538 354.461539c90.584615 0 173.292308-35.446154 236.307693-90.584616l212.676923 200.861539c3.938462 3.938462 11.815385 7.876923 19.692307 7.876923s15.753846-3.938462 19.692308-7.876923c11.815385-11.815385 11.815385-31.507692 0-43.323077z m-488.369231-126.030769c-161.476923 0-295.384615-133.907692-295.384615-295.384616s133.907692-295.384615 295.384615-295.384615 295.384615 133.907692 295.384616 295.384615-133.907692 295.384615-295.384616 295.384616z"
            fill="#666666"
            p-id="1404"
          ></path>
          <path
            d="M598.646154 401.723077h-129.969231V271.753846c0-15.753846-11.815385-31.507692-31.507692-31.507692s-31.507692 11.815385-31.507693 31.507692v129.969231H279.630769c-15.753846 0-31.507692 11.815385-31.507692 31.507692s11.815385 31.507692 31.507692 31.507693h129.969231V590.769231c0 15.753846 11.815385 31.507692 31.507692 31.507692s31.507692-11.815385 31.507693-31.507692v-129.969231h129.96923c15.753846 0 31.507692-11.815385 31.507693-31.507692s-15.753846-27.569231-35.446154-27.569231z"
            fill="#666666"
            p-id="1405"
          ></path>
        </svg>
      </div>
      <el-slider
        class="zoom-slider"
        v-model="zoom"
        :min="1"
        :max="300"
        :format-tooltip="formatZoom"
        @on-change="zoomIng = false"
        @on-input="zoomIng = true"
      ></el-slider>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.flow-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  .flow-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 0 0;
    border: 0;
    float: none;
    margin: -1px 0 0;
    max-width: none;
    outline: 0;
    padding: 0;
  }
  .flow-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .zoom-box {
    position: absolute;
    left: 20px;
    bottom: 20px;
    height: 34px;
    max-width: 50%;
    border-radius: 3px;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
    background-color: #fff;
    color: #666;
    z-index: 10;
    padding: 0 6px;
    .zoom-svg {
      height: 34px;
      display: flex;
      align-items: center;
      .icon {
        margin: 0 6px;
      }
    }
    .zoom-slider {
      display: none;
      padding: 0 10px;
      width: 300px;
      max-width: 100%;
    }
    &:hover,
    &.zoom-ing {
      .zoom-svg {
        display: none;
      }
      .zoom-slider {
        display: inline-block;
      }
    }
  }
}
</style>
<script>
// import JSPDF from 'jspdf'

export default {
  name: 'Flow',
  props: {
    value: {
      type: Object,
      default: function () {
        return {}
      }
    },
    readOnly: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      loadIng: true,

      url: null,

      zoom: -1,
      zoomIng: false,

      bakData: ''
    }
  },
  created () {
    this.url =
      'static/grapheditor/' +
      (this.readOnly ? 'viewer' : 'index') +
      '.html?lang=zh'

    // this.url = 'https://demo.wookteam.com/js/grapheditor/' + (this.readOnly ? 'viewer' : 'index') + '.html?lang=zh'
  },
  mounted () {
    window.addEventListener('message', this.handleMessage)
  },
  beforeDestroy () {
    window.removeEventListener('message', this.handleMessage)
  },
  watch: {
    value: {
      handler (val) {
        console.log(val)
        if (this.bakData === JSON.stringify(val)) {
          return
        }
        this.bakData = JSON.stringify(val)
        this.updateContent()
      },
      deep: true
    },
    zoom (val) {
      this.$refs.myFlow.contentWindow.postMessage(
        {
          act: 'zoom',
          params: {
            zoom: val / 100
          }
        },
        '*'
      )
    }
  },
  methods: {
    formatZoom (val) {
      return val + '%'
    },

    updateContent () {
      this.zoom = Math.max(
        1,
        (typeof this.value.scale === 'number' ? this.value.scale : 1) * 100
      )
      this.$refs.myFlow.contentWindow.postMessage(
        {
          act: 'setXml',
          params: Object.assign(
            this.value,
            typeof this.value.xml === 'undefined'
              ? {
                xml: this.value.content
              }
              : {}
          )
        },
        '*'
      )
    },

    handleMessage (event) {
      const data = event.data
      switch (data.act) {
        case 'ready':
          this.loadIng = false
          this.updateContent()
          break

        case 'change':
          this.bakData = JSON.stringify(data.params)
          this.$emit('input', data.params)
          break

        case 'save':
          this.$emit('saveData')
          break

        // case 'imageContent':
        //   const pdf = new JSPDF({
        //     format: [data.params.width, data.params.height]
        //   })
        //   pdf.addImage(data.params.content, 'PNG', 0, 0, 0, 0)
        //   pdf.save(`${data.params.name}.pdf`)
        //   break
      }
    },

    exportPNG (name, scale = 10) {
      this.$refs.myFlow.contentWindow.postMessage(
        {
          act: 'exportPNG',
          params: {
            name: name || '无标题',
            scale: scale,
            type: 'png'
          }
        },
        '*'
      )
    },

    exportPDF (name, scale = 10) {
      this.$refs.myFlow.contentWindow.postMessage(
        {
          act: 'exportPNG',
          params: {
            name: name || '无标题',
            scale: scale,
            type: 'imageContent'
          }
        },
        '*'
      )
    }
  }
}
</script>
